import { homeGoodsChartStastic } from '@/services/stastica';
import { Line } from '@ant-design/plots';
import { StatisticCard } from '@ant-design/pro-components';
import { useMount, useRequest } from 'ahooks';
import { Segmented, theme } from 'antd';
import React from 'react';
const { Statistic } = StatisticCard;

const GoodsTotalStastica: React.FC = () => {
  const { token } = theme.useToken();

  //homeGoodsChartStastic
  const { data, run } = useRequest(homeGoodsChartStastic, { manual: true });

  function getConfigData(data: unknown) {
    return {
      data: data,
      height: 250,
      xField: 'name',
      yField: 'count',
      colorField: 'ym',
      group: true,
      shapeField: 'smooth',
      style: {
        lineWidth: 3,
      },
    };
  }
  useMount(() => {
    run();
  });

  function getChange(value: string) {
    console.log('change');
    switch (value) {
      case '本月':
        run(0);
        break;
      case '上月':
        run(1);
        break;
      case '3月':
        run(3);
        break;
    }
  }

  return (
    <StatisticCard
      title="商品总览"
      bordered={true}
      chart={
        <>
          <Segmented options={['本月', '上月', '3月']} onChange={getChange} />
          <Line {...getConfigData(data)} />
        </>
      }
    />
  );
};
export default GoodsTotalStastica;
